<!--
    子路由外壳
-->
<style lang="scss" scoped>
    .nest-cont{
        background:#fff;
        border-radius:3px;
        box-shadow:0 0 10px rgba(0, 0, 0, .4);
        z-index:999;
        &.big{
            width:90%;
            height:90%;
            position:absolute;
            top:5%;
            left:5%;
        }
        &.medium{
            width:70%;
            height:70%;
            position:absolute;
            top:15%;
            left:15%;
        }
        &.small{
            width:50%;
            height:70%;
            position:absolute;
            top:15%;
            left:25%;
        }
        > .title{
            padding:10px 10px 10px 20px;
            box-shadow:0 1px 3px rgba(0, 0, 0, .1);
            position:relative;
            font-size:20px;
            line-height:25px;
            font-weight:bold;
            z-index:9;
            > .remove{
                float:right;
                font-size:25px;
                color:#777;
                cursor:pointer;
                &:hover{
                    color:#000;
                }
            }
        }
        > .footer{
            text-align:center;
            padding:10px;
            box-shadow:0 -1px 3px rgba(0, 0, 0, .1);
        }
    }
    .maskfade-enter-active .nest-cont, .maskfade-leave-active .nest-cont{
        transition:all .3s;
    }
    .maskfade-enter .nest-cont, .maskfade-leave-active .nest-cont{
        opacity:0;
        left:100% !important;
    }
    #ui-nest-flat{
        width:100%; height:100%; position:absolute; top:0; z-index:8
    }
</style>
<script type="text/jsx">
    import UiNest from './_nest.js';

    export default {
        mixins: [UiNest],
        name: 'ui-nest',
        props: {
            // title:String,
            size: {
                type: String,
                default: 'big'
            },
            prevent: {
                type: Boolean,
                default: false
            }
        },
        render(h) {
            if (this.$route.query.model) { //如果存在model
                let size = { class: ['ui flex column nest-cont ui-nest', this.size] }
                return (
                    <div>
                        <div { ...size }>
                            <div class="item title">
                                <i class="icon remove" onClick={ this.retreat }></i>
                                { this.$slots.title }
                            </div>
                            <div class="ui item one p-20 scrollbar">
                                { this.$slots.default }
                            </div>
                            <div class="item footer">
                                { this.$slots.footer }
                            </div>
                        </div>
                    </div>
                )
            }else{
                return (
                    <div id="ui-nest-flat" class="ui flex ui-nest">
                        { this.$slots.default }
                    </div>
                )
            }
        }
    }
</script>
